import React, { PropsWithChildren } from 'react';
import { Form, message } from 'antd';
import {
  ModalForm,
  ProFormCheckbox, ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { adminV1AdminControllerUpdate, adminV1AdminControllerCreate } from '@/services/auto/adminAdmin';
import { roleV1AdminControllerAll } from '@/services/auto/roleAdmin';

interface FormData extends API.AdminCreateDto {
}

interface Props {
  data?: API.AdminIndexResult;
  reload?: () => void;
}

export default (props: PropsWithChildren<Props>) => {
  const { data, reload, children } = props;

  const [form] = Form.useForm<FormData>();

  return (
    <ModalForm
      layout="horizontal"
      width={400}
      labelCol={{style: {width: 100}}}
      modalProps={{
        maskClosable: false,
      }}
      form={form}
      onOpenChange={(val) => {
        if (val) {
          if (data?.uuid) {
            form.setFieldsValue({
              ...data,
            });
          }
        } else {
          form.resetFields();
        }
      }}
      title={data?.uuid ? '管理员编辑' : '添加管理员'}
      trigger={children as JSX.Element}
      onFinish={(values) => {
        let service;
        const newValues: API.AdminCreateDto = {
          ...values,
          roleUuids: values.roleUuids ?? [],
        };
        if (data?.uuid) {
          service = adminV1AdminControllerUpdate({uuid: data.uuid},newValues);
        } else {
          service = adminV1AdminControllerCreate(newValues);
        }
        return service
          .then(() => {
            message.success('操作成功');
            reload?.();
            return true;
          })
          .catch(() => {
            return false;
          });
      }}
    >
      <ProFormText
        name="username"
        label="账号名"
        rules={[{ required: true, message: '请输入 账号名' }]}
        disabled={!!data?.uuid}
        fieldProps={{
          maxLength: 50,
        }}
      />
      <ProFormText
        name="name"
        label="姓名"
        rules={[{ required: true, message: '请输入 姓名' }]}
        fieldProps={{
          maxLength: 50,
        }}
      />
      <ProFormText.Password
        name="password"
        label="登录密码"
        rules={!data?.uuid ? [{ required: true, message: '请输入 登录密码' }] : undefined}
        fieldProps={{
          maxLength: 50,
          autoComplete: 'new-password',
        }}
      />
      <ProFormText
        name="job"
        label="职业"
        rules={[{ required: true, message: '请输入 职业' }]}
        fieldProps={{
          maxLength: 50,
        }}
      />
      <ProFormText
        name="mobile"
        label="手机"
        rules={[{ required: true, message: '请输入 手机' }]}
        fieldProps={{
          maxLength: 50,
        }}
      />
      <ProFormSelect
        mode="multiple"
        fieldProps={{
          optionFilterProp: 'label',
          showSearch: true,
        }}
        name="roleUuids"
        label="角色"
        request={()=>{
          return roleV1AdminControllerAll().then(res=>{
            return res?.map(item=>{
              return {
                label: item.name,
                value: item.uuid,
              }
            })
          })
        }}
        rules={[{ required: true, type: 'array', message: '请选择 角色' }]}
      />
    </ModalForm>
  );
};
